<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市供需匹配分析系统</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="../../static/home/assets/images/favicon.png"/>

    <!-- Bootstrap icons -->
    <link rel="stylesheet" href="../../static/home/dist/icons/bootstrap-icons/bootstrap-icons.min.css" type="text/css">

    <!-- Bootstrap Docs -->
    <link rel="stylesheet" href="../../static/home/dist/css/bootstrap-docs.css" type="text/css">

    <!-- Slick slide -->
    <link rel="stylesheet" href="../../static/home/libs/slick/slick.css" type="text/css">
    <link rel="stylesheet" href="../../static/home/libs/slick/slick-theme.css" type="text/css">

    <!-- Main style file -->
    <link rel="stylesheet" href="../../static/home/dist/css/app.min.css" type="text/css">

    <style>
        /* 菜单样式调整 */
        .menu {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            z-index: 1000;
            transition: transform 0.3s ease;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }
        .menu-hidden {
            transform: translateX(-100%);
        }
        /* 菜单切换按钮样式 */
        .menu-toggle-btn {
            position: fixed;
            left: 10px;
            top: 10px;
            z-index: 1001;
            background: rgba(255,255,255,0.9);
            padding: 8px;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
        }
        .menu-toggle-btn:hover {
            background: #fff;
        }
        /* 主内容区域调整 */
        .layout-wrapper {
            margin-left: 250px;
            transition: margin-left 0.3s ease;
        }
        .layout-wrapper-expanded {
            margin-left: 0;
        }
        /* 地图容器全屏 */
        .fullscreen-map {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<!-- preloader -->
<div class="preloader">
    <div class="preloader-icon"></div>
</div>
<!-- ./ preloader -->

<!-- 菜单切换按钮 - 始终可见 -->
<div class="menu-toggle-btn" id="menuToggleBtn">
    <i class="bi bi-list"></i>
</div>

<!-- vertical menu -->
<!-- vertical menu -->
<div class="menu" id="sideMenu">
    <div class="menu-header">
        <a href="{{url_for('home.index')}}" class="menu-header-logo">
            <h4>城市供需匹配分析系统</h4>
        </a>
    </div>
    <div class="menu-body">
        <ul>
            <li>
                <a {% block index %}{% endblock %} href="{{url_for('home.index')}}">
                    <span class="nav-link-icon">
                        <i class="bi bi-pie-chart"></i>
                    </span>
                    <span>首页</span>
                </a>
            </li>
                    <li>
                <a {% block more %}{% endblock %} href="{{ url_for('home.ana_price') }}">
                    <span class="nav-link-icon">
                        <i class="bi bi-cloud-arrow-up"></i>
                    </span>
                    <span>街区分类</span>
                </a>
            </li>
            <li>
                <a {% block face %}{% endblock %} href="{{url_for('home.dis_hot_map')}}">
                    <span class="nav-link-icon">
                        <i class="bi bi-folder"></i>
                    </span>
                    <span>城市生活圈识别</span>
                </a>
            </li>
            <li>
                <a {% block sight %}{% endblock %} href="{{ url_for('home.hot_sight_back') }}">
                    <span class="nav-link-icon">
                        <i class="bi bi-cloud-arrow-up"></i>
                    </span>
                    <span>公共服务设施供需匹配评估</span>
                </a>
            </li>
            <li>
                <a {% block hotel %}{% endblock %} href="{{ url_for('home.hot_hotel_recommend1') }}">
                    <span class="nav-link-icon">
                        <i class="bi bi-cloud-arrow-up"></i>
                    </span>
                    <span>使用说明</span>
                </a>
            </li>

            <!-- 添加分隔线 -->
            <li style="margin-top: 30px; border-top: 1px solid #eee; padding-top: 15px;"></li>

            <!-- 用户信息部分 - 放在菜单底部 -->
            <li style="margin-top: auto; padding-top: 20px;">
                <div class="header-bar">
                    <ul class="navbar-nav">
                        <li>
                            <a href="#" data-bs-toggle="dropdown" class="btn btn-white py-1 px-2 dropdown-toggle custom-shadow">
                                <span class="avatar avatar-sm me-2">
                                    <img src="../../static/home/assets/images/user/man_avatar5.jpg" class="rounded-circle" alt="avatar">
                                </span>
                                <span class="d-none d-md-inline">{{session.user}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{url_for('home.logout')}}">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- ./ vertical menu -->

<!-- layout-wrapper -->
<div class="layout-wrapper" id="mainContent">

    <!-- content -->
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
    <!-- ./ content -->

    <!-- content-footer -->
    <footer class="content-footer">
        <div>© 2023</div>
    </footer>
    <!-- ./ content-footer -->
</div>
<!-- ./ layout-wrapper -->

<!-- Bundle scripts -->
<script src="../../static/home/libs/bundle.js"></script>

<!-- Slick slide -->
<script src="../../static/home/libs/slick/slick.min.js"></script>

<!-- Main Javascript file -->
<script src="../../static/home/dist/js/app.min.js"></script>

<script>
    // 菜单切换功能
    document.addEventListener('DOMContentLoaded', function() {
        const menuToggleBtn = document.getElementById('menuToggleBtn');
        const sideMenu = document.getElementById('sideMenu');
        const mainContent = document.getElementById('mainContent');

        // 默认显示菜单
        sideMenu.classList.remove('menu-hidden');
        mainContent.classList.remove('layout-wrapper-expanded');

        menuToggleBtn.addEventListener('click', function(e) {
            e.preventDefault();
            sideMenu.classList.toggle('menu-hidden');
            mainContent.classList.toggle('layout-wrapper-expanded');

            // 触发resize事件，让地图重新调整大小
            window.dispatchEvent(new Event('resize'));
        });
    });
</script>
</body>
</html>